<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                font-family: 'icomoon';
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            video {
                position: fixed;
                width: 100%;
                height: 100%;
                z-index: -10;
                object-fit: cover;
            }
            body {
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgb(7, 14, 34);
            }
            main {
                position: relative;
                width: 220px;
                height: 130px;
                perspective: 800px;/* 改变3D元素是怎样查看透视图 */
            }
            .haha {
                position: relative;
                width: 100%;
                height: 100%;
                transform-style: preserve-3d;/* 子元素将保留其 3D 位置 */
                transition: all 1s;
            }
            .but1,
            .but2 {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 50px;
                height: 50px;
                font-size: 30px;
                color: white;
                opacity: 0.8;
                line-height: 50px;
                text-align: center;
                border-radius: 50%;
                cursor: pointer;
                user-select: none;
            }
            .but2 {
                left: -320px;
            }
            .but1 {
                right: -320px;
            }
            .but1:hover,
            .but2:hover {
                box-shadow: inset 0 0 5px rgb(18, 208, 221);
                opacity: 1;
            }
            .but1:active,
            .but2:active {
                /*  background-color: rgb(22, 163, 81); */
                box-shadow: inset 0 0 5px rgb(18, 208, 221), inset 0 0 10px rgb(18, 208, 221), inset 0 0 15px rgb(18, 208, 221);
            }
            .box {
                position: absolute;
                width: 100%;
                height: 100%;
                transform: rotateY(calc(var(--d) * 45deg)) translateZ(295px);
            }
            .box img {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <!-- video是背景视频，.but1与.but2是左右两个按钮，main与.haha是底层盒子，.box就是旋转的8张图 -->
        <video src="video/3.mp4" autoplay loop muted></video>
        <main id="main">
            <div class="but1">></div>
            <div class="but2"><</div>
            <div class="haha">
                <div class="box" style="--d: 0"><img src="img/1.jpg" /></div>
                <div class="box" style="--d: 1"><img src="img/25.jpg" /></div>
                <div class="box" style="--d: 2"><img src="img/3.jpg" /></div>
                <div class="box" style="--d: 3"><img src="img/52.jpg" /></div>
                <div class="box" style="--d: 4"><img src="img/6.jpg" /></div>
                <div class="box" style="--d: 5"><img src="img/snow.jpg" /></div>
                <div class="box" style="--d: 6"><img src="img/8.jpg" /></div>
                <div class="box" style="--d: 7"><img src="img/sea.jpg" /></div>
            </div>
        </main>

        <script>
            var haha = document.querySelector('.haha');
            var but1 = document.querySelector('.but1');
            var but2 = document.querySelector('.but2');
            /* 旋转角度 */
            var zhuan = 0;
            /* 设置轮播定时器 */
            var lunbo = setInterval(fn, 3000);

            // 点击向左按钮事件，点一次转 -45deg
            but1.addEventListener('click', function () {
                zhuan = zhuan - 45;
                haha.style.cssText = ` transform: rotateY(${zhuan}deg); `;
            });
            // 鼠标经过按钮与图片时停止轮播定时器，离开图片与按钮开始轮播定时器（简单粗暴）
            but1.addEventListener('mouseover', function () {
                clearInterval(lunbo);
            });
            but1.addEventListener('mouseout', function () {
                lunbo = setInterval(fn, 3000);
            });

            // 点击向右按钮事件，点一次转 45deg
            but2.addEventListener('click', fn);
            // 鼠标经过按钮与图片时停止轮播定时器，离开图片与按钮开始轮播定时器（简单粗暴）
            but2.addEventListener('mouseover', function () {
                clearInterval(lunbo);
            });
            but2.addEventListener('mouseout', function () {
                lunbo = setInterval(fn, 3000);
            });

            function fn() {
                zhuan = zhuan + 45;
                haha.style.cssText = ` transform: rotateY(${zhuan}deg); `;
            }
            // 鼠标经过按钮与图片时停止轮播定时器，离开图片与按钮开始轮播定时器（简单粗暴）
            haha.addEventListener('mouseover', function () {
                clearInterval(lunbo);
            });
            haha.addEventListener('mouseout', function () {
                lunbo = setInterval(fn, 3000);
            });
        </script>
    </body>
</html>
